<template>
  <view class="container">
    <view class="userInfo">
      <image src="../static/logo.png" mode="" class="userInfo_img"></image>
      <view class="userInfo_name">
        张三三
      </view>
      <view class="userInfo_num">
        微信号：A3333
      </view>
      <image src="@/static/pagesC/code.png" mode="" class="userInfo_icon"></image>
      <!-- <u-icon class="userInfo_icon" name="arrow-right" color="#CDCDCD" size="40"></u-icon> -->
    </view>
    <!-- 列表 -->
    <view class="dat_list">
      <view class="title">
        当前排队客户（2人）
      </view>
      <view class="dat_list_item">
        <view class="item_name">
          001进厂
        </view>
        <view class="item_time">
          刚刚
        </view>
        <view class="item_user t-center">
          <image class="iamge" src="@/static/index/kehuguanli.png" mode=""></image>
          <span>刘先生</span>
        </view>
        <view class="item_jiao">
          正在叫号
        </view>
        <view class="item_detail">
          详情
        </view>
      </view>
      <view class="dat_list_item">
        <view class="item_name">
          001进厂
        </view>
        <view class="item_time">
          刚刚
        </view>
        <view class="item_user t-center">
          <image class="iamge" src="@/static/index/kehuguanli.png" mode=""></image>
          <span>刘先生</span>
        </view>
        <view class="item_jiao">
          正在叫号
        </view>
        <view class="item_detail">
          详情
        </view>
      </view>
    </view>
  </view>
</template>

<script>
</script>

<style lang="scss">
  .userInfo {
    margin-bottom: 20rpx;
    width: 100%;
    position: relative;
    height: 120rpx;
    background-color: #fff;

    .userInfo_img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 30rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .userInfo_name {
      position: absolute;
      top: 20rpx;
      left: 125rpx;
      font-size: 28rpx;
    }

    .userInfo_num {
      position: absolute;
      font-size: 28rpx;
      top: 60rpx;
      left: 125rpx;
      color: #CDCDCD;
    }

    .userInfo_icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 30rpx;
      width: 50rpx;
      height: 50rpx;
    }
  }

  .dat_list {

    padding: 30rpx;
    background-color: #fff;

    .title {
      font-size: 28rpx;
      font-weight: 700;
      line-height: 60rpx;
      margin-bottom: 5rpx;
    }

    .dat_list_item {
      // margin-bottom: 3rpx;
      // padding: 30rpx;
      position: relative;
      height: 130rpx;
      background-color: #fff;
      border-bottom: 2rpx solid #AEAEAE;

      .item_name {
        top: 20rpx;
        left: 0;
        position: absolute;
        font-size: 28rpx;
      }

      .item_time {
        top: 20rpx;
        right: 0;
        position: absolute;
        font-size: 24rpx;
        color: #AEAEAE;
      }

      .item_user {
        position: absolute;
        top: 75rpx;
        left: 0;
        color: #AEAEAE;
        font-size: 24rpx;

        .iamge {
          margin-right: 10rpx;
          width: 35rpx;
          height: 35rpx;
        }
      }

      .item_jiao {
        position: absolute;
        top: 65rpx;
        right: 90rpx;
        padding: 5rpx 10rpx;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
        background-color: #7F7F7F;
        border-radius: 7rpx;
      }

      .item_detail {
        position: absolute;
        top: 65rpx;
        right: 0;
        padding: 5rpx 10rpx;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
        background-color: #7F7F7F;
        border-radius: 7rpx;

      }
    }
  }
</style>